<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layuiAdmin 后台管理员</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="__STATIC__/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="__STATIC__/layuiadmin/style/admin.css" media="all">
  <style>
    .layui-upload-img{width: 92px; height: 92px; margin: 0 10px 10px 0;}
  </style>
</head>
<body>
  <br>
  <!-- <div class="layui-inline" id="btn">
    <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-event="btn" lay-filter="LAY-user-back-arraydel">
      <i class="layui-icon layui-icon-delete layuiadmin-button-btn" title="批量删除">批量删除</i>
    </button>
  </div> -->


<table class="layui-hide" id="wxList" lay-filter="wxList"></table>
<!-- 状态 -->
<script type="text/html" id="buttonTpl">

  {{#  if(d.status == 1){ }}
<!--              <button class="layui-btn layui-btn-xs">启用</button>-->
  <input type="checkbox" checked name="open" lay-skin="switch" lay-filter="switchTest" lay-text="上线|下线">

  {{#  } else { }}
  <input type="checkbox"  name="open" lay-skin="switch" lay-filter="switchTest" lay-text="上线|下线">
<!--              <button class="layui-btn layui-btn-primary layui-btn-xs">禁止</button>-->
  {{#  } }}

</script>
<!-- 状态end -->

<script type="text/html" id="barDemo">

  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  <!-- <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a> -->
</script>

<form class="layui-form" lay-filter="layuiadmin-form-admin" id="layuiadmin-form-admin" style="padding: 20px 30px 0 0;">

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">微信号</label>
      <div class="layui-input-inline">
        <input type="hidden" name="gid" value="{$gid}">

        <input type="text" name="wxnum" lay-verify="required" autocomplete="off" placeholder="填写微信号" class="layui-input">
      </div>
    </div>

    <div class="layui-inline">
      <label class="layui-form-label">客服名称</label>
      <div class="layui-input-inline">
        <input type="text" name="wxname" placeholder="微信昵称，如：陈老师"  autocomplete="off" class="layui-input">
      </div>
    </div>

  </div>

  <div class="layui-form-item layui-row">
    <div class="layui-col-xs2" style="text-align: right; padding: 0 18px;"> 二维码  </div>
    <div class="layui-upload layui-col-xs6">
      <button type="button" class="layui-btn" id="test1">上传图片</button>
      <input type="hidden" name="img"  value="" id="wxImg">
      <div class="layui-upload-list">
        <img class="layui-upload-img" id="img">
        <p id="demoText"></p>
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>

  <div class="layui-form-item layui-hide">
    <input type="button" lay-submit lay-filter="LAY-wx-create-submit" id="LAY-wx-create-submit" value="确认">
  </div>
</form>


 <script src="__STATIC__/layuiadmin/layui/layui.js"></script>
  <script>
  layui.config({
    base: '__STATIC__/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'table','upload'], function(){
    var $ = layui.$
    ,form = layui.form
    ,upload = layui.upload
    ,table = layui.table;
//普通图片上传
    var uploadInst = upload.render({
      elem: '#test1'
      ,url: 'imgSave' //改成您自己的上传接口
      ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index,file,result){
          $('#img').attr('src', result); //图片链接（base64）
        });
      }
      ,done: function(res){
        // console.log(res);
        $('#wxImg').val(res.savename);
        //如果上传失败
        if(res.code != 1){
          return layer.msg('上传失败');
        }
        console.log(res);
        //上传成功
      }
      ,error: function(){
        //演示失败状态，并实现重传
        var demoText = $('#demoText');
        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
        demoText.find('.demo-reload').on('click', function(){
          uploadInst.upload();
        });
      }
    });


    //监听提交
    form.on('submit(demo1)', function(data){
      $.ajax({
        url:"addwx",
        type:"POST",
        dataType:"json",
        data:data.field,
        success:function (res) {
          console.log(res);
          if (res.code == 1 ){
            layer.msg(res['msg'],{icon: 1,time: 1000 },function () {
              $("#layuiadmin-form-admin")[0].reset();
              $('#img').attr('src', '');
              layui.form.render();
              table.reload('wxList');

            });
          }
        }
      });

      return false;
    });


    //获取添加后的微信号
    table.render({
      elem: '#wxList'
      ,url:'catchOne?gid='+{$gid}
      ,method:"post"
      // ,toolbar: '#barDemo' //开启头部工具栏，并为其绑定左侧模板
      ,title: '微信列表'
      ,cols: [[
        { title:'ID', fixed: 'left', type:'numbers'}
        // ,{field:'levelName', title:'目录_结构',templet: '#titleTpl' }
        ,{field:'id',type:'checkbox',hide:false,width:30}
        // ,{field:'id', hide: false}
        ,{field:'number', title:'微信号',width:156}
        ,{field:'name', title:'客服名称'}
        ,{field:'imgurl', title:'二维码地址'}
        , { field: 'status', title: '状态', toolbar: '#buttonTpl', event: 'setSign', style: 'cursor: pointer;', width: 100 }
        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:120}
      ]]
      ,page: false
    });

    table.on('tool(wxList)', function(obj){
      var data = obj.data;
      console.log(data);
      if(obj.event === 'del'){
        layer.msg('122');
        layer.confirm('确认删除该条信息吗？删除后将无法返回！', function(index){

          $.ajax({
            type: "GET",
            url:'deleteWx',
            data:data,
            dataType:"json",
            success:function (res) {
              if (res['code']==1){
                layer.msg(res['msg'],{icon: 1,time: 1000 },function () {
                  obj.del();
                  layer.close(index);
                });
              }else {
                layer.msg(res['msg'],{icon: 2,time: 1000 });
              }
            }
          });
        });

      }else if(obj.event ==='edit'){
        alert('正在完善编辑功能')
      }else if(obj.event ==='setSign'){
        // alert('下线');
        // console.log(1);
          console.log(obj.data);
          $.ajax({
            url: "exchangeWxStatus",
            type: "GET",
            data: obj.data,
            dataType: "json",
            success: function (res) {
              table.reload('wxList');
              layer.msg(res['msg']);
            }
          })
      }

    });


       // 批量删除
       form.on('submit(LAY-user-back-arraydel)', function(){
      var index = parent.layer.getFrameIndex(window.name);
      var checkStatus = table.checkStatus('wxList');
      console.log(checkStatus.data)//选中行的数据
      var items = checkStatus.data;
      if (items == "" || items == undefined || items == null) {
         layer.msg('请选择需要批量删除复制数据！',{icon: 2,time: 2000 },function () {
                  layer.close(index);
          });
         return false;
      }
      var arr=[];     //存储/取出 需要删除得记录id
      for (var i = 0; i < items.length; i++) {
        // console.log(i)
        arr.push(items[i]['id']);
      }
      // 输出需要删除的记录id
      console.log(arr)
      // 待有空完善后端接口

      // 提交数据到后台进行删除，php代码。。。。
      // layer.confirm('确认批量删除复制信息吗？删除后将无法返回！', function(index){
      //   $.ajax({
      //       type: "POST",    //根据post请求批量删除数据
      //       url:'delete',
      //       data:{'id':arr},
      //       dataType:"json",
      //       success:function (res) {
      //         console.log(res);
      //         if (res['code']==1){
      //           layer.msg(res['msg'],{icon: 1,time: 1000 },function () {
      //             layer.close(index);
      //             table.reload('LAY-user-back-manage');
      //           });
      //         }
      //       }
      //     });
      // });
    });

  });
  </script>
</body>
</html>

